/*
 * @Author: quit
 * @Date: 2022-10-20 11:39:28
 * @LastEditTime: 2022-10-28 15:43:12
 * @Descripttion: webpack配置信息
 * @notice:
 */
const path = require('path') // node 中处理文件路径的方法

/**
 * @description: 处理 webpack serve 无预览的index.html的插件
 */
const htmlPlugin = require('html-webpack-plugin')
const { options } = require('less')
// 此包返回一个构造函数
const _htmlPlugin = new htmlPlugin({
    template: './src/index.html', // 需要copy的页面
    filename: './index.html' // copy文件的存放位置及文件名
})

/**
 * @description: 打包前自动清理上一次的打包文件
 */
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 导出一个webpack配置对象
module.exports = {
    devtool: 'nosources-source-map', // Source Map 配置值 eval-source-map & nosources-source-map & source-map
    mode: 'development', // webpack的运行模式;字段用于指定构建模式 可选值为开发模式与生产模式 'development' & 'production'
    resolve: {
        alias: {
            '@': path.join(__dirname, './src/')
        }
    },
    module: {
        // 配置对指定的文件类型进行指定的 Loader 解析规则
        rules: [
            // 定义对应模块的 loader 加载器
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.png|jpg|gif$/, use: 'url-loader?limit=22&outputPath=imgaes' }, // limit 为当前loader的参数为文件的大小单位为字节
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // exclude 字段用于排除不需要处理的，在使用时只需要关注自己的代码不需要处理其他的模块.
        ]
    },
    entry: path.join(__dirname, './src/index.js'), // entry 字段用于确定打包的入口文件, __dirname 为当前代码文件的文件地址;第二个参数为需要处理的文件.
    output: {
        // output 字段用于指定打包出口的存放文件位置
        path: path.join(__dirname, 'dist'), // 指定文件的存放地址
        // 输出的文件名字
        filename: 'js/main.js'
    },
    plugins: [_htmlPlugin, new CleanWebpackPlugin()], //  插件的配置字段为一个数组,在webpack运行时会调用插件
    devServer: {
        // 通过webpack启动的web服务的配置项
        open: true, // 是否在完成后打开浏览器
        port: 9527, // 指定服务的端口号
        host: '127.0.0.1' // 指定web服务的IP地址
    }
}
